<template>
  <div>
    <!-- 卡片视图 -->
    <!-- <el-card>
      <el-input
        class="el-input custom-input"
        type="textarea"
        clearable
        :rows="7"
        v-model="textarea"
      >
        <p>WebSocket Data: {{ tips }}</p>
      </el-input>
    </el-card> -->
    <!-- 使用v-html来渲染转换后的HTML -->
    <div>
      <!-- <h2>日志索引:</h2> -->
      <!-- <h2>{{log}}:</h2> -->
      <!-- <div v-html="log"></div> -->
      <div v-html="ansiHtml" style="margin-top: 15px; font-size: 16px; line-height: 0.7"></div>
      <!-- <div v-for="(item, index) in ansiHtml" :key="index">
        <div v-html="item"></div>
      </div> -->
    </div>
  </div>
</template>

  <script>
/* eslint-disable */
// import ansi_up from "ansi_up";
import { AnsiUp } from "ansi_up";
export default {
  name: "LogWindow",
  data() {
    return {
      input_text: "哈利路亚",
      input_deviceId: 3,
      ansiHtml: "", // 用于存储转换后的HTML
    };
  },
  created() {},
  watch: {
    // 监听 question 的变化
    ansiText(newValue, oldValue) {
      console.log(this.$store.state.log_data);
      var ansi_up = new AnsiUp();
      this.ansiHtml += ansi_up.ansi_to_html(newValue)+"<br>";  
      this.$store.state.log_data=''
    },
  },
  computed: {
    // 使用 Vuex 的状态
    tips() {
      if (this.$store.state.msg_error) {
        this.$message.error(this.$store.state.msg_error);
        this.$store.state.msg_error = "";
        return this.$store.state.msg_error;
      }
    },
    ansiText() {
      return this.$store.state.log_data;
    },
  },
};
</script>

  
